<template>
   <div class="person">
<h2>当前求和为:{{sum}}</h2>
   </div>
  <button @click="changeSum">点我sum+1</button>

</template>
<!--TS 初始-->
<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'

import {ref,onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onBeforeUnmount,onUnmounted} from "vue";
let sum=ref(0)
function changeSum(){
  sum.value+=1;
}
//创建
console.log("创建")
//挂载
onBeforeMount(()=>{
 console.log("挂在前")
})
onMounted(()=>{
  console.log("子挂载完毕")
})
onBeforeUpdate(()=>{
  console.log("更新前")
})
onUpdated(()=>{
  console.log("更新完毕")
})
onBeforeUnmount(()=>{
  console.log("卸载前")
})
onUnmounted(()=>{
  console.log("卸载完毕")
})
</script>
<style scoped>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
person{
  font-size: 20px;
  display: flex;
}
</style>